<template>
  <el-container class="Databases">
    <getBack top="20px"></getBack>

    <el-container class="container">
      <el-header height="80px">
        <!-- 收缩图标 -->
        <!-- <i :class="collapseBtnClass" @click="stretch"></i> -->
        <div class="title">
          <h2>自习室展示模块区域</h2>
          <!-- <p>濒危动物 目前系统在线人数</p> -->
          <div class="tltlePicture">
            <!-- <img src="../../assets/POEA (2).png" alt="" /> -->
          </div>
        </div>
        <el-input
          placeholder="请输入想查询的自习室"
          v-model="inputAnimalName"
          @change="requestAnimalInfo"
        >
          <template #append> <el-button :icon="Search" /> </template
        ></el-input>

        <el-icon style="margin-left: 10px; cursor: pointer" @click="cancelSearchRoom"
          ><Close
        /></el-icon>
      </el-header>

      <el-main class="minScrollBarStyle" ref="containerRef">
        <!-- 滚动按钮 -->
        <!-- v-bind="getScrollInfo" -->
        <getScroll></getScroll>

        <el-row :gutter="24">
          <el-col
            :xs="8"
            :sm="8"
            :md="8"
            :lg="8"
            :xl="8"
            v-for="(animalItem, index) in studyRoom.lists"
            :key="index"
          >
            <el-card class="box-card animalCard" shadow="hover">
              <div class="card">
                <!-- <div class="blob"></div> -->
                <!-- @click="toInfoParticulars(animalItem.animalId)" -->
                <el-image
                  @click="selectAnimal(animalItem)"
                  :src="animalItem.image"
                  class="img"
                  :lazy="true"
                ></el-image>
                <h2>{{ animalItem.name }}</h2>
                <h3>设备：{{ animalItem.facilities || "暂无" }}</h3>
                <p class="label">允许最大人数：{{ animalItem.people_ceiling || "暂无" }}</p>
                <p class="label2">收费情况：{{ animalItem.charge || "暂无" }}</p>
                <span class="card-button">点击预约自习室</span>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="placeholder" style="height: 100px"></div>

        <!-- 分页 -->
        <ele-pagination
          :totalCount="studyRoom.total"
          styleClass="fixed"
          :defaultPageSize="3"
          @paginationChange="paginationChange"
        ></ele-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue"
import elePagination from "@/components/ele-pagination/ele-pagination.vue"
import getScroll from "@/components/UI-cnps/getScroll/getScroll.vue"
import useRouterJump from "@/hooks/useRouterJump"

import { localCache } from "@/utils/cacheData"
import { storeToRefs } from "pinia"
import { onMounted, onUnmounted, ref } from "vue"
import { messageReminder } from "@/utils/notificationHint"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import useStudyRoomStore from "@/store/main/studyRoom/studyRoom"
import { getCurrentPositionsByBaiDui } from "@/utils/getCurrentPosition"

// 获取滚动区域的dom
const containerRef = ref<Element>()

const studyRoomStore = useStudyRoomStore()
const { studyRoom } = storeToRefs(studyRoomStore)

/* 获取动物数据 */
// function getAnimals(typeId: string, limit?: number, offset?: number) {
//   // console.log(console.log(typeId))
//   dataBaseStore.getAnimalsByType(typeId, limit, offset)
// }

const longitude = ref(116.397428)
const latitude = ref(39.90923)

/* 获取数据 */
function getStudyRoom(limit?: number, offset?: number) {
  // console.log(console.log(typeId))
  studyRoomStore.getStudyRoom(longitude.value, latitude.value, limit, offset)
}

// 3.路由跳转 数据量太大，用路由传参方式不合适
const { routerJump } = useRouterJump()

// 5.放到localStorage
function selectAnimal(animalItem) {
  localCache.setCache("roomInfo", animalItem)
  routerJump("push", "RoomParticulars")
}

/* 搜索动物 */
let inputAnimalName = ref("")
// let cancelDefaultActive = ref(false)
function requestAnimalInfo() {
  const keyWord = inputAnimalName.value.trim()
  if (!keyWord) {
    console.log("12312312")

    messageReminder({
      message: "请输入关键字",
      type: "error"
    })
  } else {
    studyRoomStore.likeSearchStudyRoom(keyWord, 20, 0).then(() => {
      // 将侧边栏选中效果取消
      // cancelDefaultActive.value = true
    })
  }
}

function cancelSearchRoom() {
  inputAnimalName.value = ""
  getStudyRoom()
}

/* 分页器的自定义事件 */
function paginationChange(limit, offset) {
  getStudyRoom(limit, offset)

  // nextTick(() => {
  //   containerRef.value!.scrollTo({
  //     top: 0,
  //     behavior: "smooth" // 平滑滚动效果
  //   })
  // })
}

onMounted(() => {
  // 页面挂载时，禁用滚动条
  document.documentElement.style.overflow = "hidden"

  // currentAnimalTypeId.value = asideBarRef.value?.defaultActive
  // 挂载时默认获取一次动物的数据
  // getAnimals(asideBarRef?.value?.defaultActive as string)

  getCurrentPositionsByBaiDui()
    .then((res) => {
      // console.log(res.center)
      longitude.value = res.center.lng
      latitude.value = res.center.lat

      getStudyRoom()
    })
    .catch(() => {
      getStudyRoom()
    })
})

onUnmounted(() => {
  // 页面销毁前，恢复滚动条
  document.documentElement.style.overflow = ""
})
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}

.container {
  height: 100vh;
  display: flex;
  // background-color: #ebf3fa;
  background-color: #ecf5ff;

  .el-header {
    background-color: #faf7ff;
    position: relative;
    // background-color: #eee;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);

    i {
      font-size: 26px;
      color: black;
      line-height: 60px;
    }

    // 标题
    .title {
      margin-left: 60px;
      h2 {
        color: #0a043c;
        letter-spacing: 1.25px;
        font-weight: 600;
      }
    }

    // 搜索输入框
    :deep(.el-input) {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 60px;
      height: 50px;
      width: 300px;
      border: 1px solid transparent;
    }
    :deep(.el-input__inner) {
      height: 50px;
      line-height: 50px;
      border: 0px;
      letter-spacing: 1px;
      font-size: 16px;
    }
    :deep(.el-input-group--append > .el-input__wrapper) {
      // border-top-left-radius: 6px;
      // border-bottom-left-radius: 6px;
      border-radius: 6px;
      margin-right: 6px;
      border: 0;
    }
    :deep(.el-input-group--append > .el-input__wrapper) {
      border-radius: 8px;
    }

    :deep(.el-input-group__append) {
      border-radius: 8px;
      border: 1px solid #eee;
      background-color: #fff;

      .el-icon {
        transition: all 0.75s;
      }
      &:hover .el-icon {
        font-weight: 600;
        transform: scale(1.3);
      }
    }
  }
  .el-main {
    height: 623px;
    padding: 0 40px;
    margin-bottom: 100px;
  }
}

// ++++++++++++++++++++++++
.el-row {
  .titleName {
    display: flex;
    padding-right: 18px;
    padding-left: 26px;
    position: relative;
    background-color: #27343b;
    color: #fff;
    height: 60px;
    line-height: 60px;
    border-radius: 12px;
    justify-content: space-between;

    .name {
      letter-spacing: 1.3px;
    }

    i {
      font-size: 22px;
    }
  }

  .animalCard {
    margin-top: 26px;
    border-radius: 16px;
    position: relative;
    // overflow: visible;

    // 用户信息卡片start
    .card {
      // width: 190px;
      position: relative;
      width: 100%;
      // height: 254px;
      margin: 0 auto;
      // background: #f0f0f0;
      border-radius: 10px;
      text-align: center;
      transition: all 0.5s;
      // 水滴有下边距 图片有上边距 消除外边距合并、
      overflow: hidden;
      border-bottom: 1px solid #eee;
    }

    /* 卡片顶部水滴 */
    .card .blob {
      height: 14px;
      width: 75%;
      border-radius: 0 0 30px 30px;
      margin: 0 auto;
      // background-color: #0a043c;
      background-color: rgba(10, 4, 60, 0.85);
      // 元素可见
      visibility: visible;
      transition: all 0.3s;
    }

    // 鼠标放上卡片，里面的顶部水滴高度设为0
    .card:hover .blob {
      height: 0;
    }

    /* 图片头像区 */
    .card .img {
      cursor: pointer;
      display: flex;
      margin: 20px auto 0px auto;
      // width: 240px;
      // height: 240px;
      width: 300px;
      height: 300px;
      transform: scale(0.9);
      // background-color: #4bb8ff;
      border-radius: 50%;
      font-size: 10px;
      // background-image: url("@/assets/portrait.jpg");
      // background-size: 100% 100%;
      justify-content: center;
      align-items: center;
      transition: all 0.5s;
    }

    .card:hover .img {
      // transform: scale(1.2);
      width: 300px;
      height: 300px;
      transform: scale(1);
      box-shadow: 0 0 20px 1px rgb(0 0 0 / 32%);
      // background-color: #f0f0f0;
      // z-index: 99999;
    }

    /* 用户名 */
    .card h2 {
      padding: 15px 10px;
      font-size: 24px;
      transition: all 0.1s;
      z-index: -99;
      line-height: 16px;
      transition: all 0.5s;
    }

    .card:hover h2 {
      font-size: 27px;
    }

    .card h3 {
      padding: 0 30px;
      // 不换行
      white-space: nowrap;
      // 溢出隐藏
      overflow: hidden;
      // 文本溢出省略号
      text-overflow: ellipsis;
      margin-bottom: 12px;
      font-size: 18px;
      color: #666;
    }

    // .card:hover h2 {
    //   // 透明度为0 也即隐藏
    //   display: none;
    //   width: 100%;
    //   position: absolute;
    //   transition: all 0.5s;
    // }

    .card:hover h3 {
      opacity: 0;
      transition: all 0.5s;
    }
    .card:hover .label2 {
      opacity: 0;
      transition: all 0.5s;
    }
    .card:hover .label {
      opacity: 0;
      transition: all 0.5s;
    }

    /* 社交平台图标 */
    .card .socialPlatform i {
      cursor: pointer;
      opacity: 1;
      display: inline-block;
      margin: 20px 8px 0;
      transition: all 0.75s;
    }

    .card:hover .socialPlatform {
      position: absolute;
      width: 100%;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      opacity: 1;
      color: #fff;
    }

    .card:hover .socialPlatform i {
      font-size: 24px;
      margin: 0 14px 6px;
      transition: all 0.5s;
    }

    // 动物标签
    .label,
    .label2 {
      font-weight: 600;
      display: block;
      margin: 0 auto 10px auto;
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label2 {
      margin-bottom: 42px;
    }

    .card:hover .label {
      opacity: 0;
      transition: all 0.5s;
    }

    // 用户信息卡片end

    // 鼠标划进按钮出来
    .card-button {
      background-color: rgba(10, 4, 60);
      color: #fff;
      border-radius: 8px;
      letter-spacing: 1px;
      padding: 10px 12px;
      z-index: 10;
      position: absolute;
      bottom: 0;
      left: 50%;
      // 隐藏
      opacity: 0;
      transform: translate(-50%, 150%);
      transition: 0.3s ease-out;
    }

    &:hover .card-button {
      transform: translate(-50%, -125%);
      opacity: 1;
    }
  }
}

:deep(.el-card__body) {
  padding: 0px;
}

.el-tag {
  font-size: 14px;
  margin-right: 5px;
  margin-top: 8px;
}
</style>

<style>
/* vue一个页面中突然因为某些原因出现了滚动条，但是因为HTML产生的，怎么在该页面设置不然HTML有滚动条产生 */
/* 
html {
  overflow: hidden;
}
> 使用js进行控制
*/
</style>
